<template>
  <el-form :model="ruleForm" :rules="rules" ref="formName" class="demo-ruleForm2" >
      <el-row>
          <el-col>
              <el-form-item label="排队类型" prop="radio">
                      <el-radio-group v-model="ruleForm.radio">
                          <el-radio-button label="万能排队"></el-radio-button>
                          <el-radio-button label="挂号排队"></el-radio-button>
                          <el-radio-button label="银行排队" ></el-radio-button>
                          <el-radio-button label="餐厅排队" ></el-radio-button>
                          <el-radio-button label="办事排队" ></el-radio-button>
                          <el-radio-button label="摇号排队" ></el-radio-button>
                          <el-radio-button label="活动排队" ></el-radio-button>
                          <el-radio-button label="网红店排队" ></el-radio-button>
                      </el-radio-group>
              </el-form-item>
          </el-col>
      </el-row>
      <el-row>
          <el-col>
              <el-form-item label="备注信息" prop="textarea">
                      <el-input
                          type="textarea"
                          :rows="4"
                          placeholder="找人排队，托人办事儿，请填写您的备注信息"
                          v-model="ruleForm.textarea"
                          style="width:870px">
                      </el-input>
              </el-form-item>
          </el-col>
      </el-row>
      <el-row>
          <el-col>
              <el-form-item label="排队地址" prop="address">
                      <el-input placeholder="请填写排队地址" clearable v-model="ruleForm.Address" style="width:870px">
                          <el-button slot="append" icon="el-icon-map-location" @click="getDialog()"></el-button>
                      </el-input>
              </el-form-item>
          </el-col>
      </el-row>
      <el-dialog :visible.sync="dialogVisible" title="地图">
          <AMap @updateLocation="getAddress"/>
          <el-button @click="FaDialog()">选择该地址</el-button>
      </el-dialog>
      <el-row>
          <el-col>
              <el-form-item label="具体地址" prop="newaddress">
                  <el-input placeholder="请填写楼号及门牌号" clear="clearable" v-model="ruleForm.newAddress" style="width:870px"></el-input>
              </el-form-item>
          </el-col>
      </el-row>
      <el-row>
          <el-col>
              <el-form-item label="联系方式" prop="phone">
                  <el-input placeholder="请填写电话号码" clear="clearable" v-model="ruleForm.phone" style="width:860px"></el-input>
              </el-form-item>
          </el-col>
      </el-row>
      <el-row>
          <el-col :span="8">
              <el-form-item label="开始时间" prop="opentime">
                      <el-select v-model="ruleForm.value" placeholder="请选择">
                          <el-option
                              v-for="item in ruleForm.options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                          </el-option>
                      </el-select>
              </el-form-item>
          </el-col>
      </el-row>
      <el-row>
          <el-col>
              <el-form-item label="活动时间" required>
                  <el-row>
                      <el-col :span="8">
                          <el-form-item prop="date1">
                              <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width:100%;"></el-date-picker>
                          </el-form-item>
                      </el-col>
                      <el-col :span="8">
                          <el-form-item prop="date2" label-width="0px">
                              <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width:100%;"></el-time-picker>
                          </el-form-item>
                      </el-col>
                  </el-row>
              </el-form-item>
          </el-col>
      </el-row>
      <el-row>
          <el-col>
              <el-form-item label="费用" required>
                  <el-input placeholder="请填写费用" clear="clearable" v-model="ruleForm.money" style="width:880px"></el-input>
              </el-form-item>
          </el-col>
      </el-row>
      <el-row type="flex" justify="center" style="text-align:center">
          <el-col :span="8">
              <el-form-item style="display:inline-block">
                  <el-button type="success" @click="Submit()">发布</el-button>
                  <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
          </el-col>
      </el-row>
  </el-form>
</template>
<script>
import axios from 'axios';
import AMap from '../components/AMap.vue';
  export default{
      name:"myQueue",
      components:{AMap},
      data(){
          return{
              dialogVisible:false,
              ruleForm:{
                  radio:'万能排队',
                  Address:'',
                  newAddress:'',
                  phone:'',
                  value:'',
                  date1:'',
                  date2:'',
                  money:'',
                  options:[
                      {value:'选项一',label:'立即前往'},
                      {value:'选项二',label:'稍后前往'}   
                  ]
              },
              rules:{
                  radio:[
                      {required:true,message:'请至少选择一个类型',trigger:'change'}
                  ],
                  Address:[
                      {required:true,message:"请填写地址",trigger:'blur'}
                  ],
                  newAddress:[
                      {required:true,message:"请填写地址",trigger:'blur'}
                  ],
                  phone:[
                      {required:true,message:"请填写联系方式",trigger:'blur'}
                  ],
                  date1: [
                      {required: true, message: '请选择日期', trigger: 'change' }
                  ],
                  date2: [
                      {required: true, message: '请选择时间', trigger: 'change' }
                  ],
                  money:[
                      {required:true,message:"请填写配送费用",trigger:'blur'}
                  ],

              }
          }
      },
      methods:{
          getAddress(dataForm){
              console.log(dataForm)
              this.ruleForm.Address = dataForm.orgAddr;
              console.log(this.ruleForm.Address);
          },
          getDialog(){
              this.dialogVisible=true;
          },
          FaDialog(){
              this.dialogVisible=false;
          },
          Submit(){
              this.formdata = {radio:this.ruleForm.radio,Address:this.ruleForm.Address,newAddress:this.ruleForm.newAddress,phone:this.ruleForm.phone,value:this.ruleForm.value,date1:this.ruleForm.date1,date2:this.ruleForm.date2,money:this.ruleForm.money}
              this.$refs.formName.validate(valid=>{
                  if(valid){
                      this.$toast.success("发布成功", {
                          position: "top-center",
                          timeout: 5000,
                          closeOnClick: true,
                          pauseOnFocusLoss: true,
                          pauseOnHover: true,
                          draggable: true,
                          draggablePercent: 0.6,
                          showCloseButtonOnHover: false,
                          hideProgressBar: true,
                          closeButton: "button",
                          icon: true,
                          rtl: false
                      });
                      axios.post('http://localhost:3000/queue',this.formdata)
                      .then(response=>{
                          console.log(response);
                      })
                      .catch(error=>{
                          console.log(error);
                      })
                  }
                  else{
                      this.$toast.error("error", {
                          position: "top-center",
                          timeout: 5000,
                          closeOnClick: true,
                          pauseOnFocusLoss: true,
                          pauseOnHover: true,
                          draggable: true,
                          draggablePercent: 0.6,
                          showCloseButtonOnHover: false,
                          hideProgressBar: true,
                          closeButton: "button",
                          icon: true,
                          rtl: false
                      });
                  }    
              })
          },
          resetForm(){
              this.$refs.formName.resetFields();
          }
      }
  }
</script>
<style scoped lang="scss">
.demo-ruleForm2{
    margin-top: -20px;
    background-color: rgba(234, 239, 187,0.3); 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2),
                0 6px 20px rgba(0, 0, 0, 0.1); 
    width: 950px;
    height: 700px;
    position:relative;
    left:-300px
}
</style>